<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>联系我们</title>
    <link rel="shortcut icon" href="img/logo1.png">
    <!-- 引入css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/contact.css">
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入js -->
    <script src="js/contact.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <header class="w">
            <div class="logo">
                <a href="./玄机科技.html"> <img :src="logoImg"></a>
            </div>
            <!-- 导航栏 start -->
            <div class="nav">
                <ul>
                    <li><a :href="about.name" target="_self">{{about.value}}</a></li>
                    <li>{{brand}}
                        <ul>
                            <li class="xl" v-for="imgSrc in imgSrc"><img :src="imgSrc"></li>
                        </ul>
                    </li>
                    <li v-for="navList in navList"><a :href="navList.name" target="_self">{{navList.value}}</a></li>
                </ul>
            </div>
            <!-- 导航栏 end-->
        </header>

        <main class="w">
            <!-- 滚轮 -->
            <div class="sr">
                <div class="li1">
                    <img :src="wxImg">
                    <div class="li2">
                        <img :src="QRCode">
                    </div>
                    <div class="li3">
                        <p></p>
                    </div>
                </div>
                <div class="li1" v-for="rollerBarImgList in rollerBarImgList">
                    <img :src="rollerBarImgList.img">
                    <div :class="rollerBarImgList.className"><a href="#">{{rollerBarImgList.value}}</a></div>
                </div>
            </div>
            <div class="pic">
                <img :src="picImg" alt="">
            </div>
            <div class="contact">
                <p :class="contact.className" v-for="contact in contact">{{contact.value}}</p>
            </div>
            <div class="business">
                <div class="amusm" v-for="amusmList in amusmList">
                    <div class="icon1 am-u-sm-2">
                        <img :src="amusmList.imgSrc" alt="">
                    </div>
                    <div class="nav1 am-u-sm-9">
                        {{amusmList.amusm9}}
                        <p class="contact-text">{{amusmList.contact}}<br>
                            <br>{{amusmList.addr}}<br>
                            <br>
                            <a :href="amusmList.hrefMail">{{amusmList.href}}</a><br>
                            <br>{{amusmList.tel}}<br><br></p>
                    </div>
                </div>
            </div>

            <!-- 地图start -->
            <div class="site w" v-for="mapList in mapList">
                <div class="am-u-sm-3">
                    <div class="icon1 am-u-sm-2">
                        <img :src="mapList.imgSrc" alt="" />
                    </div>
                    <div class="nav1 am-u-sm-9 ">{{mapList.amusm9}}</div>
                </div>
                <div class="am-u-sm-12 nav2">
                    <p>{{mapList.p1}}</p>
                    <p>{{mapList.p2}}</p>
                </div>
                <!--百度地图容器-->
                <div :id="mapList.idList">
                    <img :src="mapList.addrSrc">
                </div>
            </div>
            <!-- 地图end -->

        </main>
        <!-- 底部区域 -->
        <div class="footer w">
            <!-- 左侧 -->
            <div class="bottomLeft">
                <a></a>
            </div>
            <!-- 右侧 -->
            <div class="bottomRight">
                <ul>
                    <li>
                        <a href="#" v-for="bottomList in bottomList"> {{bottomList}} <span>|</span></a>

                    </li>
                    <li v-for="textList in textList">
                        <a href="#">{{textList}}</a>
                    </li>
                    <li>
                        <a href="#">
                            <img :src="bottomLogo" alt="">{{tel}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>